@import "~scss/variables";

$sw-skeleton-bar-color: var(--color-border-primary-disabled);
$sw-skeleton-bar-height: 32px;
$sw-skeleton-shimmer-dark: var(--color-background-primary-default);
$sw-skeleton-shimmer-light: var(--color-background-primary-disabled);

.sw-skeleton-bar {
    height: $sw-skeleton-bar-height;
    width: 100%;
    background-color: $sw-skeleton-bar-color;
    overflow: hidden;

    &:not(:last-child) {
        margin-bottom: 32px;
    }

    &__shimmer {
        height: 100%;
        /* stylelint-disable-next-line max-line-length */
        background-image: linear-gradient(89.17deg, $sw-skeleton-shimmer-light 0.8%, $sw-skeleton-shimmer-dark 50.09%, $sw-skeleton-shimmer-light 96.31%);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 0 0;
        animation: barShimmer 1800ms infinite;
        animation-timing-function: linear;
        transform: translate(-100%);

        @keyframes barShimmer {
            to {
                transform: translate(120%);
            }
        }
    }
}
